<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap.css">
  <script src="vue.js"></script>
  <style>
    [v-cloak]{
      display: none;
    }
  </style>
</head>
<body>
  <div id="app" class="container">
    <input type="text" v-model="item.itemName" placeholder="商品名称">
    <input type="text" v-model.number="item.itemPrice">
    <button @click="addCart">增加一条商品</button>
    <hr>

    <table  class="table table-bordered table-condensed table-hover">
      <tr>
        <th>商品名称</th>
        <th>商品数量</th>
        <th>商品价格</th>
        <th>小计</th>
        <th>删除</th>
      </tr>
      <tr v-for="(item,index) in items" >
        <td>
          <input type="checkbox" 
            v-model="item.isChecked"
            @change="singleChecked(index)"
            >
          <span v-cloak>{{item.itemName}}</span>
        </td>
        <td>
          <button class="btn btn-primary btn-xs"
            @click="add(index)"
          >+</button>
          <span v-cloak>{{item.itemNum}}</span>
          <button 
            class="btn btn-default btn-xs"
            @click="reduce(index)"
            >-</button>
        </td>
        <td>
          单价：
          <span v-cloak>{{item.itemPrice}}</span>
        </td>
        <td>
          合计：￥{{ (item.itemPrice*item.itemNum).toFixed(2) }}
        </td>
        <td>
          <button 
            class="btn btn-danger"
            @click="del(index)"
            >删除</button>
        </td>
      </tr>
      <tr v-if="!items.length">
        <td colspan="5" class="text-center">
          暂无商品
        </td>
      </tr>
    </table>
    <div>
      全选：
      <input type="checkbox" @change="allChecked" v-model="isAllChecked">
      总价格: <span>{{ total }}</span>
    </div>
  </div>
  <script>
    let vm = new Vue({
      el:"#app",
      data:{
        item:{
          itemName:"",
          itemPrice:""
        },
        isAllChecked:true,
        items:[
          {
            itemName:"商品a",
            itemNum:1,
            itemPrice:14.5,
            isChecked:true
          },
          {
            itemName:"商品b",
            itemNum:2,
            itemPrice:30.35767,
            isChecked:true
          },
          {
            itemName:"商品c",
            itemNum:1,
            itemPrice:20.5,
            isChecked:true
          }
        ],
        total:0
      },
      methods:{
        addCart(){
          // 深克隆
         let item = JSON.parse(JSON.stringify(this.item));
         item.itemNum = 1;
         item.isChecked=true;
         this.items.unshift(item);
        },
        del(i){
          // 删除商品
          if(confirm("确认删除吗?")){
            this.items.splice(i,1);
            this.calcTotal();
          }
        },
        allChecked(){
          this.items.forEach(el=>{
            el.isChecked = this.isAllChecked;
          })
        },
        singleChecked(i){
          this.calcTotal();
        /*
        判断 是不是 有没有选中的
        filter 
        some
        every
        */  
        this.isAllChecked = !this.items.some(el=>!el.isChecked);
        
        },
        add(i){
          // 增加一个商品
          this.items[i].itemNum++;
          this.calcTotal();
        },
        reduce(i){
          // 减少一个商品
         
          this.items[i].itemNum--;
          if( this.items[i].itemNum <=1 ){
            this.items[i].itemNum=1;
          }

          this.calcTotal();
        },
        calcTotal(){
          // 单独封装计算总价格的 方法
          /*
          总价格： 所有商品的 件数*num 且 是选中的商品
          1，排除掉 没有选中的
          2，计算 这些选中商品的总价格
          */ 
           let checkedItem = this.items.filter(el=>el.isChecked);
          // let checkedItem = items.filter(function(el){
          //   return el.isChecked;
          // });
            // 计算
            this.total = 0;
            checkedItem.forEach(el=>{
              this.total += (el.itemPrice*el.itemNum);
            })
            this.total = parseFloat(this.total.toFixed(2));
        }
      }
    })

    console.log(vm);
    vm.calcTotal();
  </script>
</body>
</html>